Standalone interactive article · integration case

HTML 正文如何成为站内文章

这个最小 Case 展示 Markdown 索引载体、MkDocs 外层详情页与自包含 HTML 正文如何协作:文章身份留在站内,视觉与交互留在 HTML。

Canonical URL1

主入口始终是 Markdown 文章 URL。

Reverse indexes3+

笔记、分类、标签和搜索都能找到它。

Runtime boundarySandbox

正文脚本运行在受限 iframe 中。

Portable outputHTML

下载后仍是可直接打开的单文件。

三层各自负责什么

真正的兼容不是把 HTML 丢到静态目录,而是保留 MkDocs Blog 已经提供的文章身份、导航和索引关系。

1

Markdown 索引载体

保存 front matter、导言和摘要,生成日期、分类、标签、作者与唯一文章 URL。

2

MkDocs 外层页面

渲染真实站点导航、可点击分类与标签、下载按钮,以及横向全宽的 HTML 工作区。

3

自包含 HTML 正文

负责技术内容、图表与交互,不访问父页面,也不重复维护站点元数据。

索引与阅读形成闭环

分类和标签从 Markdown front matter 生成;读者进入主文章 URL 后,再由外层模板加载同名 `.preview.html`。

笔记列表分类页面标签页面 Markdown 主文章front matter · 导言 · canonical URL可返回所有站内索引 HTML 正文iframe · 下载单文件交互

发布前需要验证什么

测试不只看 iframe 是否出现,还要验证从索引进入、从文章返回,以及下载文件能否独立运行。

检查面期望结果失败含义
文章主入口.md 生成固定 Blog URLHTML 被误做成孤立静态页
反向索引笔记、分类、标签链接到同一主 URLfront matter 或 Blog 接入缺失
详情导航笔记、分类和标签都是实际链接模板仍在使用占位链接
正文工作区iframe 横向占满可用宽度沿用了普通 Markdown 窄栏布局
HTML 下载清除托管平台注入后通过单文件校验下载结果依赖线上脚本
最终判断:HTML 正文可以改变文章的表现形式,但不能取代 Markdown 在站点中的索引身份。两者配对,才能同时获得站内组织能力和自由的交互页面。